<template>
  <div style="width: 50%;margin: 20px auto;">
    <el-card style="width: 100%;display: flex;" class="card1">
      <div style="width: 100%;display: flex;">
        <div style="width: 100px ;height: 100px;">
          <img v-if="user.icon" :src="this.user.icon" alt="" srcset=""
            style="width: 100% ;height: 100%;border-radius: 50%;">
        </div>
        <div style="width: calc(100% - 100px);padding-left: 20px;box-sizing: border-box;">
          <div class="name">{{ user.username }}</div>
          <div class="id">id:{{ user.id }}</div>
          <div class="nickName">{{ user.username }}</div>
        </div>
        <div style="width: 300px;">
          <el-button type="primary" plain size="mini" @click="bianji">编辑</el-button>
          <el-button type="primary" plain size="mini" @click="czmm">重置密码</el-button>
        </div>
      </div>
    </el-card>
    <div class="bottom1">
      <div class="menu11">
        <div style="border-bottom: 1px solid #e5e5e5;box-sizing: border-box;height: 30px;">个人中心</div>
        <el-menu :default-active="activeName" @select="handleSelect" class="el-menu-vertical-demo"
          style="border-right: 0px;">
          <el-menu-item index="1">
            <i class="el-icon-setting"></i>
            <span slot="title">我的成果</span>
          </el-menu-item>
          <el-menu-item index="2">
            <i class="el-icon-setting"></i>
            <span slot="title">我的统计</span>
          </el-menu-item>
        </el-menu>
      </div>
      <div class="rightmenu">
        <div v-if="activeName == '1'">
          <div style="margin: 20px 0px; display: flex;">
            <div @click="check(index)" v-for="(item, index) in cat" class="category-item"
              :class="cur == index ? 'category-item-active' : ''">{{ item.dictLabel }}</div>

          </div>
          <div v-if="newslist.length > 0 && cur == 0">
            <el-card class="list1" v-for="item in newslist" @click="tode1(item, 4)">
              <div class="listimg" @click="tode1(item, 4)"> <img :src="item.cover" alt=""></div>
              <div class="listcontent">
                <div class="listtitle">{{ item.courseName }}</div>
                <div class="listcontent1">{{ item.createBy }}</div>
                <div class="time"><i class="el-icon-time"></i> {{ item.createTime }}</div>
              </div>
            </el-card>
            <div class="pagination">
              <el-pagination background @current-change="handleCurrentChange" :current-page="queryform.current"
                :page-sizes="[5, 10, 20]" :page-size="queryform.pageSize" layout="total, prev, pager, next"
                :total="total">
              </el-pagination>
            </div>
          </div>
          <div v-if="newslist.length > 0 && cur == 1">
                        <el-card class="list1" v-for="item in newslist" @click="tode11(item, 4)">
                            <div class="listimg" @click="tode11(item, 4)"> <img :src="item.cover" alt=""></div>
                            <div class="listcontent">
                                <div class="listtitle">{{ item.paperTitle }}</div>
                                <div class="listcontent1">{{ item.createBy }}</div>
                                <div class="time"><i class="el-icon-time"></i> {{ item.createTime }}</div>
                            </div>
                        </el-card>
                        <div class="pagination">
                            <el-pagination background @current-change="handleCurrentChange"
                                :current-page="queryform.current" :page-sizes="[5, 10, 20]"
                                :page-size="queryform.pageSize" layout="total, prev, pager, next" :total="total">
                            </el-pagination>
                        </div>
                    </div>
          <div v-if="newslist.length > 0 && cur == 2">
            <el-card class="list1" v-for="item in newslist" @click="tode2(item, 4)">
              <div class="listimg" @click="tode2(item, 4)"> <img :src="item.cover" alt=""></div>
              <div class="listcontent">
                <div class="listtitle">{{ item.projectName }}</div>
                <div class="listcontent1">{{ item.createBy }}</div>
                <div class="time"><i class="el-icon-time"></i> {{ item.createTime }}</div>
              </div>
            </el-card>
            <div class="pagination">
              <el-pagination background @current-change="handleCurrentChange" :current-page="queryform.current"
                :page-sizes="[5, 10, 20]" :page-size="queryform.pageSize" layout="total, prev, pager, next"
                :total="total">
              </el-pagination>
            </div>
          </div>
          <div v-if="newslist.length > 0 && cur == 3">
            <el-card class="list1" v-for="item in newslist" @click="tode3(item, 4)">
              <div class="listimg" @click="tode3(item, 4)"> <img :src="item.cover" alt=""></div>
              <div class="listcontent">
                <div class="listtitle">{{ item.rewardName }}</div>
                <div class="listcontent1">{{ item.createBy }}</div>
                <div class="time"><i class="el-icon-time"></i> {{ item.createTime }}</div>
              </div>
            </el-card>
            <div class="pagination">
              <el-pagination background @current-change="handleCurrentChange" :current-page="queryform.current"
                :page-sizes="[5, 10, 20]" :page-size="queryform.pageSize" layout="total, prev, pager, next"
                :total="total">
              </el-pagination>
            </div>
          </div>
          <div v-if="newslist.length > 0 && cur == 4">
            <el-card class="list1" v-for="item in newslist" @click="tode(item)">
              <div class="listimg" @click="tode(item)"> <img :src="item.cover" alt=""></div>
              <div class="listcontent">
                <div class="listtitle">{{ item.patentTitle }}</div>
                <div class="listcontent1">{{ item.createBy }}</div>
                <div class="time"><i class="el-icon-time"></i> {{ item.createTime }}</div>
              </div>
            </el-card>
            <div class="pagination">
              <el-pagination background @current-change="handleCurrentChange" :current-page="queryform.current"
                :page-sizes="[5, 10, 20]" :page-size="queryform.pageSize" layout="total, prev, pager, next"
                :total="total">
              </el-pagination>
            </div>
          </div>
          <div v-else>
            <el-empty></el-empty>
          </div>
        </div>
        <el-card v-if="activeName == '2'">

          <div id="main1" style="width: 100%;height: 300px;">

          </div>
        </el-card>
      </div>
    </div>
    <!-- <el-card style="width: 70%;margin: 20px auto;">
        <el-form :model="user" label-width="100px" style="padding-right: 50px">
          <div style="margin: 15px; text-align: center">
          
            <el-upload action="/oss"  :headers="{ Authorization:'Bearer ' + token }" 
                     :on-success="handleAvatarSuccess">

                        <img v-if="user.icon" :src="this.user.icon" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
               
          </div>
          <el-form-item label="账号" prop="username">
            <el-input v-model="user.username" disabled placeholder="账号"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input v-model="user.password" type="password"  placeholder="密码"></el-input>
          </el-form-item>
         
          <div style="text-align: center; margin-bottom: 20px">
            <el-button type="primary" @click="update">保 存</el-button>
          </div>
        </el-form>
      </el-card> -->
    <el-dialog title="个人中心" :visible.sync="fromVisible" width="40%" :close-on-click-modal="false" destroy-on-close>
      <el-form :model="user" label-width="100px" style="padding-right: 50px">
        <div style="margin: 15px; text-align: center">

          <el-upload action="/oss" :headers="{ Authorization: 'Bearer ' + token }" :on-success="handleAvatarSuccess">

            <img v-if="user.icon" :src="this.user.icon" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>

        </div>
        <el-form-item label="账号" prop="username">
          <el-input v-model="user.username" disabled placeholder="账号"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="user.password" type="password" placeholder="密码"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-select v-model="user.sex" placeholder="性别">
            <el-option label="男" value="0"></el-option>
            <el-option label="女" value="1"></el-option>

          </el-select>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="user.email" placeholder="邮箱"></el-input>
        </el-form-item>
        <el-form-item label="学士" prop="scholar">
          <el-input v-model="user.scholar" placeholder="学士"></el-input>
        </el-form-item>
        <el-form-item label="地址" prop="address">
          <el-input v-model="user.address" placeholder="地址"></el-input>
        </el-form-item>
        <el-form-item label="研究方向" prop="researchDirection">
          <el-input v-model="user.researchDirection" placeholder="研究方向	"></el-input>
        </el-form-item>
       
        <el-form-item label="职称" prop="technicalTitle	">
          <el-input v-model="user.technicalTitle" placeholder="职称"></el-input>
        </el-form-item>
        <el-form-item label="所属系" prop="belongingField">
          <el-input v-model="user.belongingField" placeholder="所属系	"></el-input>
        </el-form-item>
        <el-form-item label="个人简介" prop="personalProfile">
          <div id="editor"></div>
        </el-form-item>

        <div style="text-align: center; margin-bottom: 20px">
          <el-button type="primary" @click="update">保 存</el-button>
        </div>
      </el-form>
    </el-dialog>
    <el-dialog title="修改密码" :visible.sync="fromVisible1" width="40%" :close-on-click-modal="false" destroy-on-close>
      <el-form :model="form1" label-width="100px" style="padding-right: 50px" :rules="rules" ref="formRef">


        <el-form-item label="原密码" required>
          <el-input v-model="form1.oldpassword" placeholder="原密码" show-password></el-input>
        </el-form-item>
        <el-form-item label="新密码" required>
          <el-input v-model="form1.newpassword" show-password placeholder="新密码"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" required>
          <el-input v-model="form1.qrpasword" placeholder="确认密码" show-password></el-input>
        </el-form-item>


      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="fromVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="save1">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import service from '@/request';
import * as echarts from "echarts";
import E from 'wangeditor';
export default {
  name: "AdminPerson",
  data() {
    return {
      cur: 0,
      fromVisible: false,
      form1: {},
      user: {},
      activeName: "1",
      fromVisible1: false,
      newslist: [],
      cat: [],
      total: 0,
      form: {},
      queryform: {

      }
    }
  },
  created() {

  },
  mounted() {
    this.token = window.localStorage.getItem("token")

    this.getnew("/achievement/courseTeaching/page")
    this.getcatelist()
  },
  methods: {
    tode1(item, b) {

      this.$router.push({
        path: `/teacher/kcjxdetail?id=` + item.id
      })
    },
    tode11(item, b) {

this.$router.push({
    path: `/teacher/lwdetail?id=` + item.id
})
},
    tode3(id) {
            this.$router.push({
                path: "/teacher/detail3?id=" + id
            })

        },
    async save1() {
      if (this.form1.newpassword == '' || !this.form1.newpassword) {
        return this.$message.warning("请输入新密码")

      }
      if (this.form1.qrpasword == '' || !this.form1.qrpasword) {
        return this.$message.warning("请输入确认密码")

      }
      if (this.form1.newpassword !== this.form1.qrpasword) {
        return this.$message.warning("两次输入密码不一致")
      }

      this.form1.password = this.form1.newpassword;
      this.form1.roleIds = [3]
      delete this.form1.oldpassword
      delete this.form1.newpassword
      delete this.form1.qrpasword;
      const res = await service.put("/sys/user", this.form1)
      if (res.code == 200) {
        this.fromVisible1 = false
        this.$message({
          type: 'success',
          message: '操作成功',
          duration: 1000
        });

      }
    },
    async getdata() {

      const myChart = echarts.init(document.getElementById("main1"));// 图标初始化
      myChart.clear()
      const res = await service.get("/index/my");
      console.log(res);

      const option = {
        title: {
          text: "各类论文数量"
        },
        tooltip: {
          trigger: "item"
        },
        xAxis: {
          type: 'category',
          data: res.data.xdata
        },
        yAxis: {
          name: "数量",
          type: 'value'
        },
        series: [
          {
            data: res.data.ydata,
            type: 'bar'
          }
        ]

      };

      myChart.setOption(option);// 渲染页面
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        myChart.resize();
      });

    },
    tode(item) {

      this.$router.push({
        path: "/teacher/detail?id=" + item.id
      })
    },
    check(index) {
      this.cur = index

      console.log(this.queryform.type)
      if (this.cur == 4) {
        this.getnew("/achievement/patentApplication/page")
      }
      if (this.cur == 2) {
        this.getnew("/achievement/researchProjects/page")
      }
      if (this.cur == 0) {
        this.getnew("/achievement/courseTeaching/page")
      }
      if (this.cur == 3) {
        this.getnew("/achievement/teachingRewards/page")
      }
      if (this.cur == 1) {
                this.getnew("/achievement/academicPapers/page")
            }
    },
    async getcatelist() {

      const res = await service.get("/sys/dict/data/list?dictType=achievement_type");
      // this.cat = [{
      //   dictLabel: "全部",
      //   dictValue: ""
      // }];
      res.data.forEach(el => {
        this.cat.push({
          dictLabel: el.dictLabel,
          dictValue: el.dictValue
        })
      });
      // this.cat=res.data

    },
    handleSelect(e) {
      console.log(e)
      this.activeName = e
      if (e == '2') {
        setTimeout(() => {
          this.getdata()

        }, 2000)
      }
    },
    tode2(item) {
      this.$router.push({
        path: `/teacher/kyxmdetail?id=` + item.id
      })
    },
    handleCurrentChange(e) {
      this.queryform.current = e;
      if (this.cur == 4) {
        this.getnew("/achievement/patentApplication/page")
      }
      if (this.cur == 2) {
        this.getnew("/achievement/researchProjects/page")
      }
      if (this.cur == 0) {
        this.getnew("/achievement/courseTeaching/page")
      }
      if (this.cur == 3) {
        this.getnew("/achievement/teachingRewards/page")
      }
      if (this.cur == 1) {
                this.getnew("/achievement/academicPapers/page")
            }
    },
    initWangEditor(content) { //用户输入的文本作为参数传进函数。
      this.$nextTick(() => { //1.dom元素加载好后，先判断editor是否已经完成初始化，如果已经完成初始化，那么把editor销毁，清空。
        if (this.editor) {
          this.editor.destroy();
          this.editor = null;
        }
        this.editor = new E('#editor') //2.新建一个editor，赋值给我们一开始定义的editor，并渲染在iD为#editor的元素里
        this.editor.config.placeholder = '请输入内容' // 配置编辑器默认展示的文本
        this.editor.config.uploadFileName = 'file' //配置编辑器文件上传的名称
        this.editor.config.uploadImgServer = '/oss/editor'  //配置编辑器文件上传的接口
        this.editor.create() //执行创建编辑器
        console.log("12345")
        setTimeout(() => { //延时函数，这里没有设置延时时间，即为实时获取编辑器的文本给到this.editor.txt.html()。
          this.editor.txt.html(content)
        })

      })
    },
    czmm() {
      this.form1 = this.user;
      this.fromVisible1 = true
    },
    bianji() {
      this.fromVisible = true
      setTimeout(() => {
        this.initWangEditor(this.user.personalProfile)

      }, 3000)
    },
    async getnew(a) {
      if (this.cur == 0) {
        delete this.queryform.type
      } else {

      }
      this.user = JSON.parse(window.localStorage.getItem("userinfo"))
      const ress = await service.get("/sys/user/" + this.user.id);
      console.log(ress)
      this.user = ress.data

      this.queryform.userId = this.user.id
      const res = await service.get(a, {
        params: this.queryform
      });

      this.newslist = res.data.records
      this.total = res.data.total


    },
    handleAvatarSuccess(response, file, fileList) {
      this.user.icon = response.data
    },
    async update() {
      this.user.roleIds = [3]
      this.user.personalProfile = this.editor.txt.html()
      delete this.user.password
      const res = await service.put("/sys/user", this.user);
      console.log(res);
      if (res.code == 200) {
        this.$message.success(res.data)
        window.localStorage.setItem("userinfo", JSON.stringify(this.user))
      }
      this.fromVisible = false
    },
    handleAvatarSuccess1(response, file, fileList) {
      // 把user的头像属性换成上传的图片的链接
      this.$set(this.user, 'license', response.data)
    },
  }
}
</script>
<style>
.card1 .el-card__body {
  width: 100%;
}
</style>
<style scoped>
.category-item {

  border: 1px solid #64c5b1;
  color: #64c5b1;
  padding: 5px 7px;
  box-sizing: border-box;
  border-radius: 5px;
  margin-right: 10px;
  cursor: pointer;
}

.category-item-active {
  background-color: #64c5b1;
  color: #fff;
}

.listcontent {
  padding-left: 10px;
  box-sizing: border-box;
  width: calc(100% - 150px);
}

.listcontent1 {
  overflow: hidden;
  margin-top: 10px;
  color: rgb(102, 102, 102);
  word-break: break-all;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.listimg img {
  width: 100%;
  height: 100%;
}

.listimg {
  width: 150px;
  height: 100px;
}

.listtitle {
  font-size: 18px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.list1 {
  width: 100%;
  margin-bottom: 10px;
  padding: 10px;
  box-sizing: border-box;
}

.rightmenu {
  width: calc(100% - 200px);
  padding-left: 20px;
  box-sizing: border-box;
}

.menu11 {
  width: 200px;
  background: #fff;
  padding: 10px;
  box-sizing: border-box;

}

.bottom1 {
  margin-top: 20px;
  width: 100%;
  display: flex;
}

.nickName {
  font-size: 18px;
  color: gray
}

.id {
  font-size: 15px;
  color: #ccc;

}

.name {
  font-weight: bold;
  font-size: 20px;

}

/deep/.el-form-item__label {
  font-weight: bold;
}

/deep/.el-upload {
  border-radius: 50%;
}

/deep/.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  border-radius: 50%;
}

/deep/.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  line-height: 120px !important;
  text-align: center;
  border-radius: 50%;
}

.avatar {
  width: 120px;
  height: 120px;
  display: block;
  border-radius: 50%;
}
</style>